<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Page Size - syntax</title>
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-page/#page-size"/>
<meta name="flags" content="paged" />
<meta name="assert" content="The syntax of the 'size' property is &lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]."/>
<style type="text/css">

	@page {
		size: invalidmeansdefault landscape;
	}
	
	@page nochanges {
		size: landscape;
		size: auto;
	}
	
	div.boring {page: nochanges;}
	
	@page tall {
		size: portrait;
	}
	
	div.portrait {page: tall;}
	
	@page rotated { 
		size: landscape;
	}
	div.sideways {page: rotated;}
	
	@page smallbox { 
		size: 3in;
		margin: 0.5in;
		border: 2pt solid black;
	}
	
	@page smallboxTwoSize { 
		size: 3in 5in;
		margin: 0.5in;
		border: 2pt solid black;
	}
	
	div.boxedin {page: smallbox;}
	
	div.boxedinAgain {page: smallboxTwoSize;}

	@page a4 {
		size: A4;
		border: 2pt solid black;
		margin: 20mm;
	}
	
	div.namedSize {
		page: a4;
		padding: 0;
	}
	
	.overlay {
		position: absolute;
		top: 0mm;
		width: 168mm;
		height: 255mm;
		left: 0mm;
		background: #cfeeff;
	}
</style>
</head>
<body>
	<div>This page must be printed in the default orientation of the browser.</div>
	
	<div class="boring">This text should appear on the first page as well.</div>
	
	<div class="sideways">This content should appear on a new page. This paragraph should be printed in landscape layout (the long sides of the page should be top and bottom).</div>
	
	<div class="boxedin">This content should appear on a new page. On pages larger than 2 inches by 2 inches, the content on this page should appear in a 2 inch square inside a black border.</div>

	<div class="namedSize">
		<div class="overlay">This content should appear on a new page, inside a blue box with a black border just touching on all edges.</div>
	</div>
	
	<div class="boxedinAgain">This content should appear on a new page. On pages larger than 2 inches by 4 inches, the content on this page should appear in a rectangle 2 inches wide and 4 inches high inside a black border.</div>

	<div class="portrait">This content should appear on a new page. This paragraph should be printed in portrait layout (the long sides of the page should be left and right).</div>
</body>
</html>